<template>
	<el-scrollbar class="side-scroll-bar" :style="{height: scrollerHeight}">
		<div class="panel-container">

			<el-tabs v-model="firstTab" class="no-bottom-margin indent-left-margin">
				<el-tab-pane name="componentLib">
					<template #label>
						<span>
							<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
								  <el-icon-set-up style="height: 1.1em;width: 1.1em"/>
							  </el-icon>
							{{ $t('designer.componentLib') }}</span>
					</template>
					<el-collapse v-model="activeNames" class="widget-collapse">
						<el-collapse-item name="1" :title="$t('designer.containerTitle')">
							<draggable tag="ul"
									   :list="containers"
									   item-key="key"
									   :group="{name: 'dragGroup', pull: 'clone', put: false}"
									   :clone="handleContainerWidgetClone"
									   ghost-class="ghost"
									   :sort="false"
									   :move="checkContainerMove"
									   @start="onStart"
									   @end="onContainerDragEnd">
								<template #item="{element}">
									<li class="container-widget-item" :title="element.displayName" @dblclick="addContainerByDbClick(element)">
										<span>
											<el-icon class="color-svg-icon">
												<component :is="element.icon" style="height: 1.1em;width: 1.1em"/>
											</el-icon>
											{{ $t(`designer.widgetLabel.${element.type}`) }}</span>
									</li>
								</template>
							</draggable>
						</el-collapse-item>

						<el-collapse-item name="2" :title="$t('designer.basicFieldTitle')">
							<draggable tag="ul" :list="basicFields" item-key="key" :group="{name: 'dragGroup', pull: 'clone', put: false}"
									   :move="checkFieldMove"
									   :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
								<template #item="{ element: fld }">
									<li class="field-widget-item" :title="fld.displayName" @dblclick="addFieldByDbClick(fld)">
										<span>
											<el-icon class="color-svg-icon">
												<component :is="fld.icon" style="height: 1.1em;width: 1.1em"/>
											</el-icon>
											{{ $t(`designer.widgetLabel.${fld.type}`) }}</span>
									</li>
								</template>
							</draggable>
						</el-collapse-item>

						<el-collapse-item name="3" :title="$t('designer.advancedFieldTitle')">
							<draggable tag="ul" :list="advancedFields" item-key="key" :group="{name: 'dragGroup', pull: 'clone', put: false}"
									   :move="checkFieldMove"
									   :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
								<template #item="{ element: fld }">
									<li class="field-widget-item" :title="fld.displayName" @dblclick="addFieldByDbClick(fld)">
										<span>
											<el-icon class="color-svg-icon">
												<component :is="fld.icon" style="height: 1.1em;width: 1.1em"/>
											</el-icon>
											{{ $t(`designer.widgetLabel.${fld.type}`) }}</span>
									</li>
								</template>
							</draggable>
						</el-collapse-item>

						<el-collapse-item name="4" :title="$t('designer.customFieldTitle')">
							<draggable tag="ul" :list="customFields" item-key="key" :group="{name: 'dragGroup', pull: 'clone', put: false}"
									   :move="checkFieldMove"
									   :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
								<template #item="{ element: fld }">
									<li class="field-widget-item" :title="fld.displayName" @dblclick="addFieldByDbClick(fld)">
                <span>
					<el-icon class="color-svg-icon">
						<component :is="fld.icon" style="height: 1.1em;width: 1.1em"/>
					</el-icon>
					{{ $t(`designer.widgetLabel.${fld.type}`) }}</span>
									</li>
								</template>
							</draggable>
						</el-collapse-item>

					</el-collapse>

				</el-tab-pane>

				<el-tab-pane v-if="showFormTemplates()" name="formLib" style="padding: 8px">
					<template #label>
						<span>
							<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
								<sc-icon-form-template style="height: 1.1em;width: 1.1em"/>
							  </el-icon>
							{{ $t('designer.formLib') }}</span>
					</template>

					<template v-for="(ft, idx) in formTemplates" :key="idx">
						<el-card :bord-style="{ padding: '0' }" shadow="hover" class="ft-card" :header="'#'+(idx+1)+ft.title">
							<div class="bottom clear-fix">
								<div>{{ft.remark}}</div>
								<el-button type="text" class="right-button" @click="loadFormTemplate(ft.formJson)">
									{{ $t('designer.hint.loadFormTemplate') }}
								</el-button>
							</div>
						</el-card>
					</template>
				</el-tab-pane>

			</el-tabs>

		</div>
	</el-scrollbar>
</template>

<script>
import {containers as CONS, basicFields as BFS, advancedFields as AFS, customFields as CFS} from "./widgetsConfig"
import {addWindowResizeHandler, generateId} from "@/utils/util"
export default {
	name: "FieldPanel",
	mixins: [],
	components: {
	},
	props: {
		designer: Object,
	},
	inject: ['getBannedWidgets', 'getDesignerConfig'],
	data() {
		return {
			designerConfig: this.getDesignerConfig(),
			firstTab: 'componentLib',
			scrollerHeight: 0,
			activeNames: ['1', '2', '3', '4'],
			containers: [],
			basicFields: [],
			advancedFields: [],
			customFields: [],
			formTemplates: []
		}
	},
	computed: {
		//
	},
	created() {
		this.loadWidgets()
	},
	mounted() {
		//this.loadWidgets()
		this.scrollerHeight = window.innerHeight - 56 + 'px'
		addWindowResizeHandler(() => {
			this.$nextTick(() => {
				this.scrollerHeight = window.innerHeight - 56 + 'px'
				//console.log(this.scrollerHeight)
			})
		})
		this.getAllBpmFormTemplate();
	},
	methods: {
		async getAllBpmFormTemplate() {
			var res = await this.$API.bpm.bpmFormTemplate.getAllBpmFormTemplate.get();
			if (res.code == 200) {
				this.formTemplates = res.data;
			}

		},
		isBanned(wName) {
			return this.getBannedWidgets().indexOf(wName) > -1
		},

		showFormTemplates() {
			if (this.designerConfig['formTemplates'] === undefined) {
				return true
			}

			return !!this.designerConfig['formTemplates']
		},

		loadWidgets() {
			this.containers = CONS.map(con => {
				return {
					key: generateId(),
					...con,
					displayName: this.$t(`designer.widgetLabel.${con.type}`)
				}
			}).filter(con => {
				return !con.internal && !this.isBanned(con.type)
			})
			this.basicFields = BFS.map(fld => {
				return {
					key: generateId(),
					...fld,
					displayName: this.$t(`designer.widgetLabel.${fld.type}`)
				}
			}).filter(fld => {
				return !this.isBanned(fld.type)
			})

			this.advancedFields = AFS.map(fld => {
				return {
					key: generateId(),
					...fld,
					displayName: this.$t(`designer.widgetLabel.${fld.type}`)
				}
			}).filter(fld => {
				return !this.isBanned(fld.type)
			})

			this.customFields = CFS.map(fld => {
				return {
					key: generateId(),
					...fld,
					displayName: this.$t(`designer.widgetLabel.${fld.type}`)
				}
			}).filter(fld => {
				return !this.isBanned(fld.type)
			})
		},

		handleContainerWidgetClone(origin) {
			return this.designer.copyNewContainerWidget(origin)
		},

		handleFieldWidgetClone(origin) {
			return this.designer.copyNewFieldWidget(origin)
		},

		checkContainerMove(evt) {
			return this.designer.checkWidgetMove(evt)
		},

		checkFieldMove(evt) {
			return this.designer.checkFieldMove(evt)
		},
		onStart() {
		},
		onContainerDragEnd(evt) {
			//console.log('Drag end of container: ')
			//console.log(evt)
		},

		addContainerByDbClick(container) {
			this.designer.addContainerByDbClick(container)
		},

		addFieldByDbClick(widget) {
			this.designer.addFieldByDbClick(widget)
		},

		loadFormTemplate(jsonUrl) {
			this.$confirm(this.$t('designer.hint.loadFormTemplateHint'), this.$t('render.hint.prompt'), {
				confirmButtonText: this.$t('render.hint.confirm'),
				cancelButtonText: this.$t('render.hint.cancel')
			}).then(() => {
				let modifiedFlag = this.designer.loadFormJson(JSON.parse(jsonUrl))
				if (modifiedFlag) {
					this.designer.emitHistoryChange()
				} else {
					this.$message.error(this.$t('designer.hint.loadFormTemplateFailed'))
				}
			}).catch(error => {
				console.error(error)
			})
		}

	}

}
</script>

<style lang="scss" scoped>
@import "../../../../assets/formdesigner/styles/global.scss";

.color-svg-icon {
	color: $--color-primary;
	vertical-align: -0.15em;
	height: 1.1em;
	width: 1.1em;
	margin-left: 10px;
}

.side-scroll-bar {
	:deep(.el-scrollbar__wrap) {
		overflow-x: hidden;
	}
}

div.panel-container {
	padding-bottom: 10px;
}

.no-bottom-margin :deep(.el-tabs__header) {
	margin-bottom: 0;
}

.indent-left-margin {
	:deep(.el-tabs__nav) {
		margin-left: 20px;
	}
}

.el-collapse-item :deep(ul) > li {
	list-style: none;
}

.widget-collapse {
	border-top-width: 0;

	:deep(.el-collapse-item__header) {
		margin-left: 8px;
		font-style: italic;
		font-weight: bold;
	}

	:deep(.el-collapse-item__content) {
		padding-bottom: 6px;

		ul {
			padding-left: 10px; /* 重置IE11默认样式 */
			margin: 0; /* 重置IE11默认样式 */
			margin-block-start: 0;
			margin-block-end: 0.25em;
			padding-inline-start: 10px;

			&:after {
				content: "";
				display: block;
				clear: both;
			}

			.container-widget-item, .field-widget-item {
				display: inline-block;
				height: 28px;
				line-height: 28px;
				width: 115px;
				float: left;
				margin: 2px 6px 6px 0;
				cursor: move;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				background: #f1f2f3;
			}

			.container-widget-item:hover, .field-widget-item:hover {
				background: #EBEEF5;
				outline: 1px solid $--color-primary;
			}

			.drag-handler {
				position: absolute;
				top: 0;
				left: 160px;
				background-color: #dddddd;
				border-radius: 5px;
				padding-right: 5px;
				font-size: 11px;
				color: #666666;
			}
		}
	}
}

.el-card.ft-card {
	border: 1px solid #8896B3;
}

.ft-card {
	margin-bottom: 10px;

	.bottom {
		margin-top: 10px;
		line-height: 12px;
	}

	/*
	.image-zoom {
	  height: 500px;
	  width: 620px
	}
	*/

	.ft-title {
		font-size: 13px;
		font-weight: bold;
	}

	.right-button {
		padding: 0;
		float: right;
	}

	.clear-fix:before, .clear-fix:after {
		display: table;
		content: "";
	}

	.clear-fix:after {
		clear: both;
	}

}

</style>
